<template>
  <div class="progressBar center-col" @click="progressClick" ref="runfatbar">
    <div class="bar-inner">
      <div class="progress" ref="progress"></div>
      <div
        class="progress-btn-wrapper"
        ref="progressBtn" @touchstart.prevent="progressTouchStart" @touchmove.prevent="progressTouchMove" @touchend="progressTouchEnd">
        <div class="progress-btn" ></div>
      </div>
    </div>
  </div>
</template>
<script>
import { prefixStyle } from "../../../../static/js/common.js";
const transform = prefixStyle("transform");
const progressBtnWidth = 16;
export default {
    data() {
        return {};
    },
    props: {
        currentTime:Number,
        alltime:Number,
    },
    watch: {
        currentTime(){
            this.$refs.progress.style.width=`${parseInt(this.currentTime/this.alltime*100)}%`
            this.$refs.progressBtn.style.left=`${parseInt(this.currentTime/this.alltime*100)}%`
        }
    },
    created() {
      this.touch = {};
    },
    updated(){
        
    },
    mounted(){
        
    },
    methods: {
        
        progressClick(e) {
            //console.log(e.pageX-65,this.$refs.runfatbar.offsetWidth)

            const barWidth = (e.pageX-65) / this.$refs.runfatbar.offsetWidth // 计算点击位置相对父元素总宽的比例
            if(e.pageX-65<=this.$refs.runfatbar.offsetWidth){
                this.$refs.progress.style.width = `${barWidth*100 }%` // 进度条应所在的比例总宽
                this.$refs.progressBtn.style.left = `${barWidth*100}%-1%`
            }else if(e.pageX-65<=0){
                this.$refs.progress.style.width = '0%' // 进度条应所在的比例总宽
                this.$refs.progressBtn.style.left = '-1%'
            }else{
                this.$refs.progress.style.width = '100%' // 进度条应所在的比例总宽
                this.$refs.progressBtn.style.left = '99%'
            }
            var percent=this.$refs.progress.style.width
            this.$emit('fn',percent)
            //console.log(this.$refs.progressBtn.style.left)
        },
        progressTouchStart(e) {
            this.touch.initiated = true; // 记录已点击
            this.touch.startX = e.touches[0].pageX-65; // 记录横向坐标
            //console.log(e.touches[0].pageX-65,'--e.touches[0].pageX;');

            this.touch.left = this.$refs.progress.clientWidth; // 记录进度条长度
        },
        progressTouchMove(e) {
            
            const barWidth = (e.touches[0].pageX-65) / this.$refs.runfatbar.offsetWidth // 计算点击位置相对父元素总宽的比例
            if(e.touches[0].pageX-65<=this.$refs.runfatbar.offsetWidth){
                this.$refs.progress.style.width = `${barWidth*100 }%` // 进度条应所在的比例总宽
                this.$refs.progressBtn.style.left = `${barWidth*100}%-1%`
            }else if(e.touches[0].pageX-65<=0){
                this.$refs.progress.style.width = '0%' // 进度条应所在的比例总宽
                this.$refs.progressBtn.style.left = '-1%'
            }else{
                this.$refs.progress.style.width = '100%' // 进度条应所在的比例总宽
                this.$refs.progressBtn.style.left = '99%'
            }
            var percent=this.$refs.progress.style.width
            this.$emit('fn',percent)
            
        },
        progressTouchEnd() {
            this.touch.initiated = false;
        },
    }
};
</script>
<style lang="scss" scoped>
.progressBar {
  height: 100%;
  width: 100%;
  .bar-inner {
    //margin-left: -0.1rem;
    position: relative;
    width: 100%;
    height: 0.01rem;
    border-radius: 0.01rem;
    background-color: rgba(255, 255, 255, 0.5);
    .progress {
      position: absolute;
      width: 0;
      height: 100%;
      background-color: #fff;
      border-radius: 0.05rem;
    }
    .progress-btn-wrapper {
      position: absolute;
      left: -0.08rem;
      top: -0.13rem;
      width: 0.3rem;
      height: 0.3rem;
      .progress-btn {
        position: relative;
        top: 0.05rem;
        margin-left: -0.08rem;
        box-sizing: border-box;
        width: 0.16rem;
        height: 0.16rem;
        //border: 0.03rem solid #e9d7f3;
        border-radius: 50%;
        background: #fff;
      }
    }
  }
}
</style>
